﻿#top-navibar {
  height: 4rem;
  line-height: 4rem;
  width: 100%;
  box-shadow: 0 0 5px 0 black;
  background-color: white; }
  #top-navibar > .row {
    height: 100%; }
    #top-navibar > .row > div {
      height: 100%;
      overflow: hidden; }
  #top-navibar .navi-item {
    float: left;
    padding: 0 1rem;
    font-size: 1.6rem;
    max-width: 18rem;
    word-break: break-all;
    overflow: hidden; }
    #top-navibar .navi-item > img {
      height: 4rem;
      width: 4rem;
      padding: .5rem;
      border-radius: 2rem;
      float: left; }
    #top-navibar .navi-item > i {
      color: #3caed4; }
    #top-navibar .navi-item.focus {
      color: #f19033;
      background-color: #2e3d4f;
      transition: background-color,color ease-out .3s; }
      #top-navibar .navi-item.focus:hover {
        color: #fff;
        background-color: #f19033; }
    #top-navibar .navi-item:hover, #top-navibar .navi-item.active {
      color: #3caed4;
      background-color: #2e3d4f; }
      #top-navibar .navi-item:hover > i:before, #top-navibar .navi-item.active > i:before {
        color: #3caed4; }

#site-logo-wraper {
  width: 14%;
  float: left; }

#site-logo {
  height: 100%;
  width: 100%;
  background-image: url(/UI/imgs/vi/logo-txt.png);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center; }

#logo-container {
  float: left; }

#menu-container {
  float: left; }

#user-links {
  float: left;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  font-size: 1.4rem; }
  #user-links > a {
    padding: 0 10px; }
    #user-links > a:hover {
      color: #f19033; }

#user-tools {
  float: right; }

#pnl-full-menu {
  display: none;
  width: 50%;
  min-width: 40rem;
  min-height: 20rem;
  height: auto;
  background-color: #2e3d4f;
  box-shadow: 3px 4px 6px 0 black;
  padding: 1rem; }

.app-group {
  padding: 5px 0 0 2rem;
  line-height: normal; }
  .app-group > .ag-title {
    border-bottom: 1px solid #66bfdd;
    margin-bottom: 5px; }
  .app-group > .ag-item {
    float: left;
    width: 6rem;
    height: 6rem;
    cursor: pointer;
    display: block;
    text-align: center;
    transition: all linear .3s;
    margin-right: 10px;
    color: #fff !important; }
    .app-group > .ag-item > i {
      font-size: 4rem;
      margin-top: 5px;
      color: #3caed4;
      display: block; }
    .app-group > .ag-item:hover {
      background-color: #fff;
      color: #3caed4 !important; }
